<!--验证 Eslint 规则是否生效 - 使用举例-->
<script setup lang="ts">
// 故意使用未定义的变量
const undefinedVar = someUndefinedVariable

// 故意使用 any 类型
const anyVar: any = 'test'

// 故意使用 console.log
console.log('test console')

// 故意使用 debugger
debugger

// 故意使用未使用的变量
const unusedVar = 'unused'

// 故意使用错误的类型
const numberVar: string = 123

// 故意使用错误的函数调用
const result = someFunction()

// 故意使用错误的属性访问
const obj = {}
const value = obj.undefinedProperty

// 故意使用错误的模板语法
const template = `
  ${undefinedVar}
  ${anyVar}
  ${unusedVar}
`
</script>

<template>
  <!-- 故意使用错误的属性顺序 -->
  <div v-model="anyVar" v-if="true" v-for="item in []">
    <!-- 故意使用错误的标签闭合 -->
    <span>test
    <!-- 故意使用错误的属性名 -->
    <div :class-name="'test'">
      <!-- 故意使用错误的指令 -->
      <p v-undefined-directive="true">
        {{ undefinedVar }}
      </p>
    </div>
  </div>
</template>

<style scoped>
/* 故意使用错误的 CSS 属性 */
.test {
  color: invalid-color;
  font-size: invalid-size;
}
</style>
